<template>
	<view>
		<ym-navbar :immersive="true" title="加注返券"></ym-navbar>
		<view class="container">
			<image class="text1" src="../static/wxImage/text-jzfq.png" mode="widthFix"></image>
			<view class="bg-wrap ">
				<image class="bg1 fadeIn" src="http://img.etubang.com/group1/M00/00/49/rBCky1-2DnyAXPpIAAU-d4iovSA094.png" mode="widthFix"></image>
				<image class="bg2" src="../static/wxImage/logo-tbyj.png" mode="widthFix"></image>
			</view>
			<view class="coupon-wrap" >
				<view class="coupon" v-if="couponInfo!=''">
					<view class="coupon-l">
						<text>{{ couponInfo.couponAmount }}</text>
						<text>元</text>
					</view>
					<view class="coupon-r">
						<view>{{couponInfo.couponInfo}}</view> 
						<view>
							加注满
							<text style="color: #FFE165;">{{ couponInfo.couponOrderAmount }}</text>
							元可用
						</view>
						<view class="time">领取后的{{couponInfo.validityDays}}天内有效</view>
					</view>
				</view>
				<view v-else class="tip">本轮优惠券已被抢完了，请关注下一波活动哦！</view>
			</view>
			<view class="btn"><button type="default" :disabled="couponInfo==''" @tap="getCoupon">立即领取</button></view>
			<!-- 领取成功 -->
			<get-coupon ref="getCoupon"></get-coupon>
			<!-- 登录提示 -->
			<sign-in @submit="queryMacCode"></sign-in>

			<!-- 关注公众号弹窗 -->
			<focus-officialAccount ref="focus" @loadSuc="loadSuc"></focus-officialAccount>
		</view>
	</view>
</template>

<script>
import getCoupon from '@/components/popup/get-coupon.vue';
import focusOfficialAccount from "@/components/popup/focus-officialAccount.vue";
export default {
	components: { getCoupon, focusOfficialAccount },
	data() {
		return {
			couponInfo: '', // 优惠券信息
			info: {},
			show: false ,// 显示关注公众号弹窗
			isFocus: true,
		};
	},
	onLoad(options) {
		uni.$on('loginSuc',this.getAccoupon);
		if (options && options.recordCode) {
			this.recordCode = options.recordCode;
		} 
	},
	onUnload() {
		uni.$off('loginSuc');
	},
	methods: {
		// 获取活动优惠券信息
		getAccoupon() {
			this.checkFocus();
			this.$http({
				url: this.$api.accoupon + 'getShopCouponList',
				data: {
					recordCode: this.recordCode
				}
			}).then(res => {
				if(res.indexOf('没有优惠券') != -1) {
					uni.showModal({
						content:'本轮优惠券已被抢完了，请关注下一波活动哦！',
						showCancel:false
					})
				}
				if (Array.isArray(res) && res.length) {
					this.couponInfo = res[0];
				}
				console.log(res);
			});
		},
		// 领取优惠券
		async getCoupon() {
			let res = await this.checkFocus();
			if(!res && this.loadSuccess) {
				return this.$refs.focus.open();
			}
			this.$http({
				url: this.$api.accoupon + 'getCoupon',
				data: {
					couponId: this.couponInfo.id,
					couponType: 1, // 1 是加注券领取
					userId: this.$store.state.userId,
					forwardUserId:'',
					recordCode: this.recordCode
				} 
			}).then(async res => {
				await subscribeMsg();
				this.$refs.getCoupon.open();
				console.log('res', res);
			});
		},
		// 检测是否关注公众号
		async checkFocus() {
			let bool = await this.$http({
				url: this.$api.accoupon + 'isCarePublicNum',
				data: {
					userId: this.$store.state.userId
				}
			});
			return JSON.parse(bool);
		},
		// 关注公众号组件加载成功
		loadSuc(e) {
			this.loadSuccess = true;
		},
		// 订阅模板消息
		subscribeMsg() {
			// 优惠券到账 noLo9jvRO1v4vpH1gTaAL9TfsYhdO2dq-GK3GvTyNBE 
			return new Promise((resolve,reject) => {
				uni.requestSubscribeMessage({
					tmplIds: ['noLo9jvRO1v4vpH1gTaAL9TfsYhdO2dq-GK3GvTyNBE'],
					complete:()=> {
						uni.showLoading({
							title:'加载中'
						})
						resolve();
					}
				});
			})
			
		}
	}
};
</script>

<style lang="scss">
page {
	background: #1971ff !important;
}  

::v-deep .u-mode-center-box {
	background: rgba(0, 0, 0, 0) !important;
}
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 200rpx;
}
.text1 {
	height: 104rpx;
}
.bg-wrap {
	width: 100vw;
	height: 580rpx;
	position: relative;

	.bg1 {
		width: 100vw;
		height: 642rpx;
		will-change: transform;
	}
	.bg2 {
		position: absolute;
		bottom: 80rpx;
		left: 50%;
		width: 160rpx;
		height: 47rpx;
		transform: translateX(-50%);
		z-index: 10;
	}
}
.coupon-wrap {
	min-height: 180rpx;
	
	.tip {
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 180rpx;
	}
	.coupon {
		width: 690rpx;
		height: 180rpx;
		background: url(../static/wxImage/bg-coupon1.png);
		background-size: 690rpx 180rpx;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		view {
		}
		.coupon-l {
			width: 250rpx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #5657f0;
			font-weight: bold;
			font-size: 90rpx;
			> text:nth-child(1) {
				background-image: -webkit-linear-gradient(bottom, #5657f0, #8c90ff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			> text:nth-child(2) {
				font-size: 40rpx;
				transform: translateY(-6rpx);
			}
		}
		.coupon-r {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			padding-left: 80rpx;
			opacity: 0.88;
			view {
				color: #ffffff;
				line-height: 1.6;
				font-weight: 600;
			}

			.time {
				font-size: 22rpx;
			}
		}
	}
}
.btn {
	margin-top: 80rpx;

	> button {
		box-sizing: content-box;
		width: 400rpx;
		height: 108rpx;
		line-height: 100rpx;
		border-radius: 60rpx;
		color: #ffffff;
		background: linear-gradient(0deg, #2d50cf, #5c6fff);
		border: 4rpx solid #ffffff;
		box-shadow: 0rpx 1rpx 4rpx 1rpx #ffedc6;
		box-shadow: 0px 7px 18px 1px rgba(43, 54, 49, 0.79);
	}
}

</style>
